<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>数据提交（含插件）</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <!--App自定义的css-->
</head>

<body>
    <form id="form1" name="showUI_commit" method="post" action="/set_event">
        <h5>radio</h5>
        <label>选项1：
            <input checked type="radio" name="com1" value="1">
        </label>
        <br>
        <label>选项2：
            <input type="radio" name="com1" value="2">
        </label>
        <br>
        <label>选项3：
            <input type="radio" name="com1" value="3">
        </label>
        <br>
        <br>
        <h5>checkbox</h5>
        <label>选项1：
            <input checked type="checkbox" name="com2" value="1">
        </label>
        <br>
        <label>选项2：
            <input type="checkbox" name="com2" value="2">
        </label>
        <br>
        <label>选项3：
            <input checked type="checkbox" name="com2" value="3">
        </label>
        <br>
        <label>选项4：
            <input type="checkbox" name="com2" value="4">
        </label>
        <br>
        <br>
        <h5>checkbox</h5>
        <label>选项1：
            <input checked type="checkbox" name="com9" value="1">
        </label>
        <br>
        <label>选项2：
            <input type="checkbox" name="com9" value="2">
        </label>
        <br>
        <label>选项3：
            <input checked type="checkbox" name="com9" value="3">
        </label>
        <br>
        <label>选项4：
            <input type="checkbox" name="com9" value="4">
        </label>
        <br>
        <br>
        <h5>输入框-普通</h5>
        <label>输入框：
            <input type="text" name="com3" value="测试" placeholder="请输入">
        </label>
        <br>
        <h5>输入框-数字</h5>
        <label>输入框：
            <input type="number" name="com4" value="1" placeholder="请输入">
        </label>
        <br>
        <h5>输入框-密码</h5>
        <label>输入框：
            <input type="password" name="com5" value="123456" placeholder="请输入">
        </label>
        <br>
        <h5>输入框-滑块</h5>
        <label>输入框：
            <input type="range" name="com6" value="12" max="100" min="0">
        </label>
        <br>
        <h5>输入框-多行</h5>
        <label>输入框：
            <textarea name="com7" value="12" placeholder="请输入" row="5">asd</textarea>
        </label>
        <br>
        <h5>选择框</h5>
        <select name="com8" value="1" placeholder="请输入">
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
            <option value="4">选项4</option>
        </select>
        <br>
        <br>
        <button id="actions" type="button">提交</button>
        <button id="cancel" type="button">取消</button>
    </form>
    <form name="showUI_cancel" method="post" action="/set_event">
        <br>
        
    </form>
    <script type="text/javascript">
    function formPro(id) {
        this.id = id;
        this.nameArry = [];
        this.initData = null;
        this.init.apply(this, arguments);
    }
    //方法初始化
    formPro.prototype.init = function() {
            var _this = this;
            var _nameArry = _this.eachName();
            _this.sortData(_nameArry, function(data) {
                _this.initData = data;
            });
        }
        //获取控件的值
        //参数类型:string
    formPro.prototype.getValue = function(name) {
            var _data = {};
            var _value = '';
            var _key = '';
            var comBoxs = document.getElementsByName(name);
            if (comBoxs.length > 1) {
                check_val = [];
                for (var j = 0; j < comBoxs.length; j++) {
                    if (comBoxs[j].checked) {
                        check_val.push(comBoxs[j].value);
                    }
                }
                _value = check_val.join(",");
            } else {
                _value = comBoxs[0].value || comBoxs[0].innerText;
            }
            _key = comBoxs[0].name;
            _data[_key] = _value;
            return _data;
        }
        //获取多个控件的值
        //参数类型:array
    formPro.prototype.sortData = function(names, cb) {
            var _this = this;
            var _names = _this.nameArry;
            if (names) {
                _names = names;
            }
            var _datas = {};
            for (var i = 0; i < _names.length; i++) {

                var _data = _this.getValue(_names[i]);
                for (j in _data) {
                    _datas[j] = _data[j]
                }
            }
            if (cb) {
                cb(_datas);
            }
            return _datas;
        }
        // 整理控件的name
        // 参数类型:function
    formPro.prototype.eachName = function(cb) {
        var _id = this.id;
        var _formBox = document.getElementById(_id);
        var _inputGroup = _formBox.getElementsByTagName('input');
        var _slectGroup = _formBox.getElementsByTagName('select');
        var _textareaGroup = _formBox.getElementsByTagName('textarea');
        var _nameGroup = [];
        if (_inputGroup.length > 0) {
            for (var i = 0; i < _inputGroup.length; i++) {
                var _inputName = _inputGroup[i].name;
                if (_inputGroup[i].type == 'radio' || _inputGroup[i].type == 'checkbox') {
                    if (_nameGroup.indexOf(_inputName) > -1) {
                        continue;
                    } else {
                        _nameGroup.push(_inputName);

                    }
                } else {
                    _nameGroup.push(_inputName);
                }
            }
            for (var j = 0; j < _slectGroup.length; j++) {
                var _slectName = _slectGroup[j].name;
                _nameGroup.push(_slectName);
            }
            for (var k = 0; k < _textareaGroup.length; k++) {
                var _textareaName = _textareaGroup[k].name;
                _nameGroup.push(_textareaName);
            }
            this.nameArry = _nameGroup;
            return _nameGroup;
        }
    }

    //提交开始数据
    // 参数类型:string||obj
    formPro.prototype.sendAction = function(data) {
            var _this = this;
            var _data = _this.sortData();
            if (data) {
                _data = data;
            }
            var isObj = _data.constructor.name;
            if (isObj == "String") {
                try {
                    _data = JSON.parse(data)
                } catch (err) {
                    _data = {};
                }
            }
            var postData = {
                "name": "showUI_commit",
                "value": _data
            };
            postData = JSON.stringify(postData);
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/set_event", true);
            xhr.setRequestHeader("Content-type", "application/json");
            xhr.onreadystatechange = function() {
                var XMLHttpReq = xhr;
                if (XMLHttpReq.readyState == 4) {
                    if (XMLHttpReq.status == 200) {
                        var text = XMLHttpReq.responseText;
                        console.log(text);
                    } else {
                        console.log(XMLHttpReq.status)
                    }
                } else {
                    console.log(XMLHttpReq.readyState);
                }
            };
            xhr.send(postData);
        }
        //关闭web页面
    formPro.prototype.sendClose = function() {
        var postData = {
            "name": "showUI_cancel",
        };
        postData = JSON.stringify(postData);
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/set_event", true);
        xhr.setRequestHeader("Content-type", "application/json");
        xhr.onreadystatechange = function() {
            var XMLHttpReq = xhr;
            if (XMLHttpReq.readyState == 4) {
                if (XMLHttpReq.status == 200) {
                    var text = XMLHttpReq.responseText;
                    console.log(text);
                } else {
                    console.log(XMLHttpReq.status)
                }
            } else {
                console.log(XMLHttpReq.readyState);
            }
        };
        xhr.send(postData);
    }
    var form1 = new formPro("form1"); //实例化插件
    var comval = form1.getValue("com1"); //获取单个组件的值
    var comsval = form1.sortData(["com1", "com2", "com3"]) //获取多个组件的值
    var comsNmae = form1.eachName(); //获取组件name值得集合
    // console.log(comval);
    // console.log(comsval);
    // console.log(comsNmae);
    var actionBtn=document.getElementById("actions");
    var cancelBtn=document.getElementById("cancel");
    actionBtn.onclick=function(){
    	form1.sendAction();//发送开始post请求
    }
     cancelBtn.onclick=function(){
    	form1.sendClose();//发送取消post请求
    }
    </script>
</body>

</html>
